<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><meta name="format-detection" content="telephone=no">
	<title>tree</title>
	<link rel="stylesheet" href="../assets/agile/css/agile.layout.css">
<link rel="stylesheet" href="../assets/third/seedsui/plugin/seedsui/seedsui.min.css">
	
</head>

<body>
<div id="section_container">
	<section data-role="section" id="page_tree" class="active">
		<header>
		    <div class="titlebar">
		    	<a data-toggle="back" href="#">
		            <i class="icon icon-arrowleft"></i>
		        </a>
		        <h1>树结构</h1>
		    </div>
		</header>
		<article id="main_article" data-role="article" class="active" style="top:52px;">
			<div class="tree-box">
				<ul class="tree" id="tree">
					<li>
						<div class="treetitle"> <i class="treeicon icon-arrowright"></i>
							<a class="icontitle events-none">业务产品部</a>
							<small class="right middle events-none">100</small>
						</div>
						<ul>
							<li>
								<div class="treetitle">
									<i class="treeicon icon-arrowright"></i>
									<a class="icontitle events-none">研发体系</a>
									<small class="right middle events-none">100</small>
								</div>
								<ul>
									<li>
										<div class="treetitle">
											<i class="treeicon icon-arrowright"></i>
											<a class="icontitle events-none">开发一部</a>
											<small class="right middle events-none">100</small>
										</div>
										<ul>
											<li>
												<div class="treetitle">
													<i class="treeicon radiusround">波</i>
													<a class="icontitle events-none">成少波</a>
												</div>
											</li>
											<li>
												<div class="treetitle">
													<i class="treeicon radiusround">晓</i>
													<a class="icontitle events-none">王晓</a>
												</div>
											</li>
											<li>
												<div class="treetitle">
													<i class="treeicon radiusround">健</i>
													<a class="icontitle events-none">李健</a>
												</div>
											</li>
										</ul>
									</li>
									<li>
										<div class="treetitle">
											<i class="treeicon icon-arrowright"></i>
											<a class="icontitle events-none">开发二部</a>
											<small class="right middle events-none">100</small>
										</div>
										<ul>
											<li>
												<div class="treetitle">
													<i class="treeicon radiusround">泉</i>
													<a class="icontitle events-none">张泉</a>
												</div>
											</li>
											<li>
												<div class="treetitle">
													<i class="treeicon radiusround">景</i>
													<a class="icontitle events-none">李若景</a>
												</div>
											</li>
											<li>
												<div class="treetitle">
													<i class="treeicon radiusround">源</i>
													<a class="icontitle events-none">康根源</a>
												</div>
											</li>
										</ul>
									</li>
									<li>
										<div class="treetitle">
											<i class="treeicon icon-arrowright lastchild"></i>
											<a class="icontitle events-none">开发三部</a>
											<small class="right middle events-none">100</small>
										</div>
										<ul>
											<li>
												<div class="treetitle">
													<i class="treeicon radiusround">波</i>
													<a class="icontitle events-none">成少波</a>
												</div>
											</li>
											<li>
												<div class="treetitle">
													<i class="treeicon radiusround">东</i>
													<a class="icontitle events-none">张建东</a>
												</div>
											</li>
											<li>
												<div class="treetitle">
													<i class="treeicon radiusround">进</i>
													<a class="icontitle events-none">李进</a>
												</div>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<div class="treetitle">
									<i class="treeicon icon-arrowright"></i>
									<a class="icontitle events-none">研发二部</a>
									<small class="right middle events-none">100</small>
								</div>
								<ul>
									<li>
										<div class="treetitle">
											<i class="treeicon radiusround">梅</i>
											<a class="icontitle events-none">许啸梅</a>
										</div>
									</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</article>
	</section>
</div>
<!--- third -->
	<script src="../assets/third/jquery/jquery-2.1.3.min.js"></script>
	<script src="../assets/third/jquery/jquery.mobile.custom.min.js"></script>
	<!---  agile -->
	<script type="text/javascript" src="../assets/agile/js/agile.js"></script>
<script type="text/javascript" src="../assets/bridge/exmobi.js"></script>
<script type="text/javascript" src="../assets/bridge/agile.exmobi.js"></script>			
	<!-- app -->
	<script type="text/javascript" src="../assets/app/js/app.seedsui.js"></script>
	<script type="text/javascript" src="../assets/third/seedsui/plugin/seedsui/seedsui.min.js"></script>
	<script>
	var tr;
	window.addEventListener("load",function(e){
		//注入数据时，注意根据姓氏获得颜色
        //console.log("成少波".toPinyin().substr(0,1).toColor());

		//树结构
        tr=new Tree("#tree",{
            "onTap":function(s){
            	console.log("您点击了：");
            	console.log(s.target);
                console.log("当前节点的li为：");
                console.log(s.elLI);
            },
            "onTapLastChild":function(s){//没有子节点
                console.log("没有子节点");
            }
        });
	},false);
	
	
	</script>
</body>
</html>